<template>
  <div style="position: relative">
    <div style="position: sticky;top: 0;z-index: 999;padding-top: 20px;background-color: white;padding-bottom: 20px">
      <div class="table_Header">
        <el-row :gutter="24">
          <el-col :span="5">
            <div class="justify_left">
              <span class="table_HeaderTitle">团购名</span>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="align_items">
              <span class="table_HeaderTitle">客户信息</span>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="justify_left">
              <span class="table_HeaderTitle">团购期数</span>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="align_items">
              <span class="table_HeaderTitle">状态</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div style="display: flex;flex-direction: row;align-items: center;">
              <div style="width: 50%">
                <span style="text-align: left;" class="table_HeaderTitle">商品名称</span>
              </div>
              <div  style="width: 25%;">
                <span style="text-align: right;display: block" class="table_HeaderTitle">商品数量</span>
              </div>
              <div  style="width: 25%;">
                <span style="text-align: right;display: block" class="table_HeaderTitle">商品单价</span>
              </div>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="justify_right">
              <span class="table_HeaderTitle">操作</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="table_List" v-for="item in orderForm">
      <div class="table_ListHeader">
        <div class="align_items" >
          <span class="table_ListHeaderTitle" style="padding-right: 20px">订单号：{{item.sn}}</span>
<!--          <div class="align_items">-->
<!--            -->
<!--          </div>-->
        </div>
        <div class="align_items">
          <span style="text-align: left" class="table_ListHeaderTitle">创建时间：{{item.createDate | datetimeFormatter}}</span>
<!--          <span class="table_ListHeaderTitle">配送方式：{{item.shippingMethod | watchShippingMethod}}</span>-->
        </div>
      </div>
      <div style="padding: 10px">
        <el-row :gutter="24">
          <el-col :span="5">
            <div class="justify_left shop_Height">
              <span style="text-align: left" class="table_ContentTitle">{{item.groupBuyName}}</span>
            </div>
          </el-col>
          <el-col :span="5">
            <div style="display: flex;flex-direction: column;justify-content: center" class="shop_Height">
              <span class="table_ContentTitle">{{item.consignee}} {{item.phone}}</span>
              <el-tooltip class="item" effect="dark" :content="item.address" placement="top">
                <span style="margin-top: 5px" class="table_ContentAddressTitle">{{item.address}}</span>
              </el-tooltip>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="justify_left shop_Height">
              <span style="text-align: left" class="table_ContentTitle">{{item.periodId}}期</span>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="justify_left shop_Height">
              <span style="text-align: center" class="table_ContentTitle">{{item.orderStatus | orderStatus}}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div style="display: flex;flex-direction: row;align-items: center" v-for="items in item.itemList">
              <div style="width: 50%;">
                <span style="text-align: left" class="productTitle">{{items.name}}</span>
              </div>
              <div style="width: 25%;">
                <span style="text-align: right" class="table_ContentTitle">{{items.quantity}}</span>
              </div>
              <div style="width: 25%;">
                <span style="text-align: right" class="table_ContentTitle">{{items.price}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="justify_right shop_Height" @click="detailsClick(item.id)">
              <a class="details_Title">订单详情</a>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: [
    'orderForm'
  ],
  methods: {
    detailsClick(id) {
      console.log(id)
      this.$emit('detailsClick',id)
    }
  },
  filters: {
    watchStatus(val) {
      if (val == 0) {
        return '待付款'
      } else if (val == 1) {
        return '已付款'
      } else if (val == 2) {
        return '待退款'
      } else if (val == 3) {
        return '已退款'
      }
    },
    watchDiscount (val) {
      if (val === undefined) {
        return 0
      } else {
        return val
      }
    },
    watchShippingMethod(val){
      if (val == 0) {
        return '普通快递'
      } else if (val == 1) {
        return '到店提货'
      } else if (val == 2) {
        return '同城配送'
      } else {
        return '待发货'
      }
    },
    orderStatus(val){
      if (val == '0'){
        return '待审核'
      }
      if (val == '1'){
        return '已成交'
      }
      if (val == '2'){
        return '已退款'
      }
      if (val == '3'){
        return '已取消'
      }
      if (val == '4'){
        return '已完成'
      }
    }
  }
}
</script>

<style scoped>
.table_Header {
  width: 100%;
  background-color: #f5f7fa;
  padding: 10px;
}

.table_HeaderTitle {
  font-size: 12px;
  color: #353535;
  font-weight: 600;
}

.table_List {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #f2f2f2;
}

.table_ListHeader {
  width: 100%;
  padding: 10px;
  background-color: #f5f7fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table_ListHeaderTitle {
  font-size: 12px;
  color: #888888;
}

.align_items {
  display: flex;
  align-items: center;
  justify-content: center;
}

.justify_left {
  display: flex;
  align-items: center;
}

.justify_right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.table_ContentTitle {
  font-size: 12px;
  color: #353535;
  width: 100%;
  text-align: center;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop_Height {
  min-height: 30px;
}

.details_Title {
  font-size: 14px;
  color: #409EFF;
}

.table_ContentAddressTitle{
  font-size: 12px;
  color: #353535;
  width: 100%;
  text-align: center;
  display: block;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.productTitle{
  font-size: 12px;
  color: #353535;
  text-align: center;
  display: block;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/deep/.el-row{
  display: flex;
  align-items: center;
}
</style>
